<template>
    <div class="persongatelogitem">
        
        <div class="itemMiddle" @click="handleNameClick">
            <div class="visitname">{{ value?.VOUCHER_NO }}</div>
            <div><van-tag :color=" color" type="primary" style="padding-bottom: 1px;">{{ applytypeName }}</van-tag></div> 
        </div>

        
        <div class="itemtop" v-if="value?.staff_id">            
            <van-icon name="user-o" style="margin-right: 6px;"/>
            <div class="logtime">{{ value.staff_name }}({{ value.staff_id }})</div>
        </div>

        <div class="itemtop" v-if="value?.college_name">            
            <van-icon name="home-o" style="margin-right: 6px;"/>
            <div class="logtime">{{ value.college_name }}</div>
        </div>

        
        <div class="itemtop">            
            <van-icon name="clock-o" style="margin-right: 6px;"/>
            <div class="logtime">入场时间：{{ value?.IN_TIME}}</div>
        </div>
        
        <div class="itemtop">            
            <van-icon name="clock-o" style="margin-right: 6px;"/>
            <div class="logtime">出场时间：{{ value?.OUT_TIME }}</div>
        </div>
        
        <div class="address" v-if="value?.IN_PASS_NAME">
            <van-icon name="location-o" />
            {{ value?.IN_PASS_NAME }}            
        </div>

        
        <div class="remark">            
            <div class="remarkText">
                备注：{{ value?.IN_REMARK }}
            </div>
            <div class="showDetail detailBtns"  v-if="showViewStaff ">            
                <van-button size="small"  color="#1989fa"  class="optBtns" @click="handleViewUser">教职工信息</van-button>            
            </div>
        </div>
        

        
    </div>
</template>
<script lang="ts" setup>
import type { CarPark } from '@/types/common';
import { computed } from 'vue';
import { useRouter } from 'vue-router';

interface PersonGateLogProps{
    color:string
    value?:CarPark
    apply_type?:number
    showBtns?:boolean
}
const props = defineProps<PersonGateLogProps>();

const router = useRouter();

const color = computed(()=>{
    if(props.value?.user_type == "5")return '#ff7b00'
    return ''
})

const applytypeName  = computed(()=>{
    
    if(props.value?.user_type == "1")return '中大型客车' //大客车
    if(props.value?.user_type == "2")return '学校公车' //公车
    if(props.value?.user_type == "3")return '学生车辆' //学生
    if(props.value?.user_type == "4")return '教职工车辆'
    if(props.value?.user_type == "5")return '访客'
})


const showViewStaff = computed(()=>{
    if(props.showBtns && props.value?.user_type == '4') {
        return true;
    }else{
        return false;
    }
})

const handleNameClick = ()=>{
    if(showViewStaff.value){
        handleViewUser()
    }
}

const handleViewUser = ()=>{
    router.push('/query/person/personAllInfoDetail?id='+props.value?.staff_id);
}


</script>
<style lang="less" scoped>
.persongatelogitem{
    .itemtop{
        display: flex;
        margin-bottom: 6px;
        align-items: center;
        .logtime{
            font-size: 14px;
        }

        
    }

    .itemMiddle{
        
        height: 30px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .visitname{
            font-size:16px;
            margin-right: 10px;
        }
    }

    .remark{
        border-top: 1px dashed #dfdfdf;
        font-size: 14px;
        padding-top:10px;
        margin-top: 10px;
        display: flex;

        .remarkText{
            width: 100px;
            flex-grow: 1;
        }
        .detailBtns{        
            text-align: right;
            width: 80px;
        }
    }
}
</style>